All Projects

|

Angular Article

🗓️ 2024

A
n
g
u
l
a
r
-
A
r
t
i
c
l
e

A full-stack article publishing platform built using Angular and GraphQL, with a Node.js + Express.js backend and MongoDB for data storage. The app allows users to create, edit, and explore articles with secure authentication and a responsive UI.

Tech Stack:

Angular

GraphQL

Express.js

Tailwind CSS

JWT

MongoDB

Mongoose

Bootstrap

Javascript

React Icons

Vercel

Render

Features and Functionality

User Authentication

JWT-based login and registration system with protected routes for accessing user-specific actions and dashboard.

GraphQL API Integration

Full GraphQL CRUD operations for articles, users, and categories with efficient data querying and mutation.

Create, Edit, and Delete Articles

Authenticated users can write new articles, edit their content, and remove them from their personal dashboard.

Rich Text Editor Integration

Supports rich formatting for article content, allowing bold text, links, headers, lists, and inline media.

Public Article Feed

Users and visitors can browse published articles with search, filter, and sort functionality.

Responsive UI

Styled using a combination of Tailwind CSS and Bootstrap to ensure full responsiveness and modern design across all devices.

Article Detail View

Each article can be viewed in full on a dedicated page with author information and publication date.

Role-Based Access

Built-in role management to differentiate between regular users and admins, with different access rights and UI views.

Backend API with GraphQL + Express

Efficiently handles data mutations and queries with GraphQL resolvers and Mongoose models connected to MongoDB.

Deployment & Hosting

Angular frontend deployed on Vercel, Express backend hosted on Render with environment-based configurations.

Challenges and Solutions

Integrating GraphQL with Angular

Used Apollo Client for Angular with modular service layers to handle GraphQL operations and centralized data management.

Securing API Endpoints and Managing Tokens

Implemented JWT-based auth with middleware in Express.js to validate tokens and protect GraphQL resolvers.

Handling Real-Time Data with GraphQL

Used polling and cache updates via Apollo Client to simulate real-time updates without WebSockets.

Maintaining Consistent UI Across Frameworks

Standardized design using Tailwind CSS utility classes and Bootstrap components for layout structure and responsiveness.

Optimizing Query Performance

Implemented GraphQL query batching and used Mongoose indexing to improve query speed and reduce load time.

Managing Content Formatting in the Editor

Integrated a lightweight rich text editor with HTML sanitization to ensure both flexibility and security in article content.

Seamless Deployment and CI/CD

Configured frontend deployment on Vercel and backend on Render with environment-specific variables and Git-based CI/CD pipelines.

MERN Unicorn Blog Collaborative Tool